<template>
  <div>
    <div v-if="is_show">
      <!-- 选择装备页面 -->
      <van-overlay :show="ov_show" @click="ov_show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-search
              v-model="search_value"
              show-action
              placeholder="请输入搜索关键词"
              @cancel="ov_show = false"
            />
            <van-list finished-text="没有更多了">
              <van-cell
                class="border_bottom"
                v-for="item in filiter"
                :key="item.id"
                :title="item.name"
                @click="selected_zb(item)"
              >
                <template #label>
                  <span v-html="item.attrs_content"></span>
                </template>
              </van-cell>
            </van-list>
          </div>
        </div>
      </van-overlay>
      <!-- 头装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.tou"
          :title="data_rw.tou.name"
          value="头"
        >
          <template #label>
            <span v-html="data_rw.tou.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="头"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('tou')"
          />
        </template>
      </van-swipe-cell>

      <!-- 肩装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.jian"
          :title="data_rw.jian.name"
          value="肩"
        >
          <template #label>
            <span v-html="data_rw.jian.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="肩"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('jian')"
          />
        </template>
      </van-swipe-cell>

      <!-- 腰装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.yao"
          :title="data_rw.yao.name"
          value="腰"
        >
          <template #label>
            <span v-html="data_rw.yao.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="腰"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('yao')"
          />
        </template>
      </van-swipe-cell>

      <!-- 裤装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.kuzi"
          :title="data_rw.kuzi.name"
          value="裤"
        >
          <template #label>
            <span v-html="data_rw.kuzi.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="裤"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('kuzi')"
          />
        </template>
      </van-swipe-cell>

      <!-- 鞋装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.xie"
          :title="data_rw.xie.name"
          value="鞋"
        >
          <template #label>
            <span v-html="data_rw.xie.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="鞋"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('xie')"
          />
        </template>
      </van-swipe-cell>

      <!-- 手装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.shou"
          :title="data_rw.shou.name"
          value="手"
        >
          <template #label>
            <span v-html="data_rw.shou.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="手"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('shou')"
          />
        </template>
      </van-swipe-cell>

      <!-- 衣装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.yi"
          :title="data_rw.yi.name"
          value="衣"
        >
          <template #label>
            <span v-html="data_rw.yi.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="衣"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('yi')"
          />
        </template>
      </van-swipe-cell>

      <!-- 戒指左装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.jiezhizuo"
          :title="data_rw.jiezhizuo.name"
          value="戒指左"
        >
          <template #label>
            <span v-html="data_rw.jiezhizuo.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="戒指左"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('jiezhizuo')"
          />
        </template>
      </van-swipe-cell>

      <!-- 戒指右装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.jiezhiyou"
          :title="data_rw.jiezhiyou.name"
          value="戒指右"
        >
          <template #label>
            <span v-html="data_rw.jiezhiyou.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="戒指右"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('jiezhiyou')"
          />
        </template>
      </van-swipe-cell>

      <!-- 项链装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.xianglian"
          :title="data_rw.xianglian.name"
          value="项链"
        >
          <template #label>
            <span v-html="data_rw.xianglian.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="项链"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('xianglian')"
          />
        </template>
      </van-swipe-cell>

      <!-- 护符装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.hufu"
          :title="data_rw.hufu.name"
          value="护符"
        >
          <template #label>
            <span v-html="data_rw.hufu.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="护符"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('hufu')"
          />
        </template>
      </van-swipe-cell>

      <!-- 坐骑装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.zuoji"
          :title="data_rw.zuoji.name"
          value="坐骑"
        >
          <template #label>
            <span v-html="data_rw.zuoji.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="坐骑"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('zuoji')"
          />
        </template>
      </van-swipe-cell>

      <!-- 武器左装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.wuqizuo"
          :title="data_rw.wuqizuo.name"
          value="武器左"
        >
          <template #label>
            <span v-html="data_rw.wuqizuo.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="武器左"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('wuqizuo')"
          />
        </template>
      </van-swipe-cell>

      <!-- 武器右装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.wuqiyou"
          :title="data_rw.wuqiyou.name"
          value="武器右"
        >
          <template #label>
            <span v-html="data_rw.wuqiyou.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="武器右"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('wuqiyou')"
          />
        </template>
      </van-swipe-cell>

      <!-- 披风装备位置 -->
      <van-swipe-cell class="border_bottom">
        <!-- 装备存在 -->
        <van-cell
          :border="false"
          v-if="data_rw.pifeng"
          :title="data_rw.pifeng.name"
          value="披风"
        >
          <template #label>
            <span v-html="data_rw.pifeng.content"></span>
          </template>
        </van-cell>
        <van-cell
          class="border_bottom"
          :border="false"
          v-else
          title="暂无装备"
          value="披风"
        >
        </van-cell>

        <template #right>
          <van-button
            class="replace-button"
            type="primary"
            text="替换"
            @click="rpbtn_onclick('pifeng')"
          />
        </template>
      </van-swipe-cell>
    </div>
    <tabbar :active_idx="2" />
  </div>
</template>

<script>
import { SwipeCell, Cell, Overlay, Popup, Search, List, Toast } from 'vant'
import tabbar from './tabbar.vue'
import axios from 'axios'
export default {
  components: {
    [SwipeCell.name]: SwipeCell,
    [Cell.name]: Cell,
    [Overlay.name]: Overlay,
    [Popup.name]: Popup,
    [Search.name]: Search,
    [List.name]: List,
    [Toast.name]: Toast,
    tabbar,
  },
  setup() {
    const data_rw = {}
    return {
      data_rw,
    }
  },
  data() {
    return {
      is_show: false,
      ov_show: false,
      search_value: '',
      data: [],
      leixings: [],
    }
  },

  methods: {
    // 获取人物装备
    get_rw_zb: function () {
      axios.get('/apis/get_rwzb/').then((response) => {
        this.data_rw = response.data
        this.is_show = true
      })
    },

    // 替换按钮点击方法
    rpbtn_onclick: function (zb_type) {
      axios.get('/apis/zhuangbeis/?search=' + zb_type).then((response) => {
        this.data = response.data
        this.ov_show = true
      })
    },
    // 穿戴装备
    selected_zb: function (item) {
      console.log(item)
      var data = {
        zhuangbei: item.pk,
        leixing: item.leixing,
      }

      axios({
        method: 'post',
        url: '/apis/bind_zb/',
        data: data,
      }).then((res) => {
        if (res.data.code == 200) {
          // 重新获取装备数据
          Toast(res.data.data)
          this.$router.go(0)
        }
      })
    },
  },
  mounted: function () {
    this.get_rw_zb()
  },
  created: function () {},
  computed: {
    filiter() {
      //过滤数据，找出数据的名字包含输入的字符，符合标准直接输出数据
      return this.data.filter((item) => {
        return (
          item.name.includes(this.search_value) ||
          item.name.toUpperCase().includes(this.search_value.toUpperCase())
        )
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.replace-button {
  height: 100%;
}
.border_bottom {
  border-bottom: 1px solid rgba(235, 235, 235, 0.932);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 300px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.925);
  overflow-y: auto;
}
</style>
